<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片切换</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <!-- 减少DOM操作 -->
        <button @click="showCat">显示猫</button>
        <button @click="showDog">显示狗</button>
        <br/>
        <img :src="image" style="width: 600px;"/>
    </div>
    <script>
        const { createApp, ref } = Vue
        createApp({
            setup() {
                const image = ref('img/cat.jpg')
                const showCat = () => image.value = 'img/cat.jpg'
                const showDog = () => image.value = 'img/dog.jpg'
                return { image, showCat, showDog }
            }
        }).mount('#app')
    </script>
    
</body>
</html>